<template>
	<view class="content padding fafafa">
		<view class="padding ffffff border">
			<view class="text_x color_ling">
				订单编号：{{orderInfo.order_no}}
			</view>
			<view class="margin_top flexleft" v-for="item in orderInfo.ordergoods" :key="item.id">
				<view class="imgBox margin_right3">
					<image :src="item.goods_image_text" mode="widthFix"></image>
				</view>
				<view class="flex1 width0">
					<view class="yihang text_a color_san">
						{{item.goods_name}}
					</view>
					<view class="text_b color_jiu margin_top1">
						{{item.sku}}
					</view>
					<view class="flexbetween margin_top1">
						<view class="price">
							￥{{item.total_price}}
						</view>
						<view class="color_jiu text_six">
							x{{item.goods_num}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding ffffff margin_top border">
			<view class="text_x color_ling">
				发票类型
			</view>
			<view class="margin_top flexleft">
				<view :class="invoice_type==1?'select margin_right3':'noSelect margin_right3'" @click="invoice_type=1">
					电子发票
				</view>
				<view :class="invoice_type==2?'select':'noSelect'" @click="invoice_type=2">
					增值税专用发票
				</view>
			</view>
		</view>
		<view class="padding ffffff margin_top border">
			<view class="text_x color_ling">
				抬头类型
			</view>
			<view class="margin_top flexleft">
				<view :class="invoice_title_type==1?'select padding45 margin_right3':'noSelect padding45 margin_right3'"
					@click="invoice_title_type=1">
					个人
				</view>
				<view :class="invoice_title_type==2?'select padding45':'noSelect padding45'" @click="invoice_title_type=2">
					单位
				</view>
			</view>
		</view>
		<view class="padding ffffff margin_top flexbetween border" @click="goInvoiceLook">
			<view class="text_x color_ling">
				发票抬头
			</view>
			<view class="flexleft">
				<view class="text_a margin_right3" style="color: #F3271C;">
					{{invoice_title}}
				</view>
				<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
			</view>
		</view>
		<view v-if="invoice_title_type==2 && invoice_title">
			<view class="padding ffffff margin_top flexbetween border">
				<view class="text_x color_ling margin_right6">
					单位税号
				</view>
				<input class="flex1 textright text_a" type="text" placeholder="请输入单位税号"
					placeholder-style="font-size: 28rpx;font-weight: 500;color: #666666;" v-model="duty_paragraph">
			</view>
			<view class="padding ffffff margin_top flexbetween border">
				<view class="text_x color_ling margin_right6">
					开户银行
				</view>
				<input class="flex1 textright text_a" type="text" placeholder="请输入开户银行"
					placeholder-style="font-size: 28rpx;font-weight: 500;color: #666666;" v-model="bank_name">
			</view>
			<view class="padding ffffff margin_top flexbetween border">
				<view class="text_x color_ling margin_right6">
					银行账号
				</view>
				<input class="flex1 textright text_a" type="number" placeholder="请输入银行账号"
					placeholder-style="font-size: 28rpx;font-weight: 500;color: #666666;" v-model="bank_code">
			</view>
			<view class="padding ffffff margin_top flexbetween border">
				<view class="text_x color_ling margin_right6">
					单位地址
				</view>
				<input class="flex1 textright text_a" type="text" placeholder="请输入单位地址"
					placeholder-style="font-size: 28rpx;font-weight: 500;color: #666666;" v-model="address">
			</view>
			<view class="padding ffffff margin_top flexbetween border" style="margin-bottom: 100rpx;">
				<view class="text_x color_ling margin_right6">
					单位电话
				</view>
				<input class="flex1 textright text_a" type="number" placeholder="请输入单位电话"
					placeholder-style="font-size: 28rpx;font-weight: 500;color: #666666;" v-model="tel">
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer ffffff padding">
			<view class="footerButton" @click="applyInvoice">
				申请发票
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				order_id: "", //订单id
				orderInfo:{},//订单信息
				invoice_type: 1, // 1电子发票 2增值税专用发票
				invoice_title:"",//发票抬头
				invoice_title_type: 1, // 1个人 2单位
				duty_paragraph:"",//税号
				bank_name:"",//开户行
				bank_code:"",//企业账号
				address:"",//企业地址
				tel:"",//企业电话
			}
		},
		onLoad(options) {
			this.orderInfo=JSON.parse(decodeURIComponent(options.orderInfo))
			this.order_id = this.orderInfo.id
			console.log(this.orderInfo);
			this.getDefaultInvoice()
		},
		onShow() {
			uni.$on("invoiceLook",data=>{
				console.log(data);
				this.invoice_title=data.invoice_title
				this.invoice_title_type=data.invoice_title_type
				this.duty_paragraph=data.duty_paragraph
				this.bank_name=data.bank_name
				this.bank_code=data.bank_code
				this.address=data.address
				this.tel=data.tel
				uni.$off("invoiceLook")
			})
		},
		methods: {
			goInvoiceLook() { //我的发票抬头
				uni.navigateTo({
					url: "./invoiceLook?type=2"
				})
			},
			getDefaultInvoice(){ //获取默认发票抬头
				let _this = this;
				httpRequest.request('/api/invoice/getdefault', 'GET', {
					
				}, false, false, true).then(res => {
					if (res.code == 1) {
						if(!res.data){
							return false
						}
						_this.invoice_title=res.data.invoice_title
						_this.invoice_title_type=res.data.invoice_title_type
						_this.duty_paragraph=res.data.duty_paragraph
						_this.bank_name=res.data.bank_name
						_this.bank_code=res.data.bank_code
						_this.address=res.data.address
						_this.tel=res.data.tel
					}else{
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			applyInvoice(){ //申请发票
				let _this = this;
				httpRequest.request('/api/goods_order/apply_invoice', 'POST', {
					order_id:_this.order_id,//订单id
					invoice_type:_this.invoice_type,//发票类型:1=普通发票,2=增值税发票
					invoice_title:_this.invoice_title,//发票抬头
					invoice_title_type:_this.invoice_title_type,//发票抬头类型:1=个人,2=企业
					duty_paragraph:_this.duty_paragraph,//税号
					bank_name:_this.bank_name,//开户行
					bank_code:_this.bank_code,//企业账号
					address:_this.address,//企业地址
					tel:_this.tel,//企业电话
				}, false, false, true).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						setTimeout(()=>{
							uni.navigateBack(1)
						},500)
					}else{
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgBox {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #F3271C;
	}

	.noSelect {
		padding: 18rpx 20rpx;
		text-align: center;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.select {
		padding: 18rpx 20rpx;
		text-align: center;
		background: rgba(243, 39, 28, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #F3271C;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.padding45 {
		padding: 18rpx 45rpx;
	}

	.placeHolder {}

	.footer {
		width: 100%;
		background-color: #FFFFFF;
		z-index: 99;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;

		.footerButton {
			padding: 20rpx;
			border-radius: 41rpx;
			text-align: center;
			background-color: rgba(243, 39, 28, 1);
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>